<#--<#assign propsJson="${propsJson}"?eval />-->
<#assign propsJson="${propsJson}"?eval />
<template>
  <div style="width: 100%; height:100%" ref="echarts"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      <#assign map=modelJson[0] />
      <#assign  keys=map?keys/>
      xdata:[<#list modelJson as model>'${ model["${keys[0]}"] }'<#if model_has_next>,</#if></#list>],
      seriesdata:[
      <#list keys as key>
        <#if (key_index > 0)>
          {
            name:'${key}',
            data: [<#list modelJson as model>${ model["${key}"]?c }<#if model_has_next>,</#if></#list>],
            type: 'bar',
            stack: 'bar',
            barCategoryGap: '${propsJson.graphicbargap!'30'}' + '%'
          }
          <#if key_has_next>,</#if>
        </#if>
      </#list>
      ],
      echarts:null
    };
  },
  computed: {
    dataZoom() {
      <#if propsJson.zoomShow!false>
      return {
        type: "slider",
        show: this.zoomShow,
        start: start,
        end: end,
        height: 10,
        handleIcon:
          "M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z",
        handleSize: "100%",
        handleStyle: {
          color: "#fff",
          shadowColor: "#B1B5B9",
          shadowBlur: 5,
        },
        bottom: 10,
        backgroundColor: "#DEE3F4",
        fillerColor: "#257DFB",
      };
      <#else>
      return {
        show: false
      }
      </#if>
    },
  },
  methods: {
    echartsData() {
      const option = {
        color: [<#list propsJson.graphiccolor as graphiccolor>
          <#if graphiccolor?is_string>
          "${graphiccolor}"<#if graphiccolor_has_next>,</#if><#else><#assign colorkeys=graphiccolor?keys />
          {
          <#list colorkeys as key>
            <#if graphiccolor[key]?is_string>
            ${key}: "${graphiccolor[key]}"<#if key_has_next>,</#if>
            <#elseif graphiccolor[key]?is_number || graphiccolor[key]?is_boolean> 
            ${key}: ${graphiccolor[key]?string}<#if key_has_next>,</#if>
            <#else>
            ${key}: [<#list graphiccolor[key] as colorItem>
              {<#list colorItem?keys as ck>
                <#if colorItem[ck]?is_string>${ck}: "${colorItem[ck]}"<#else>${ck}: ${colorItem[ck]?string}</#if><#if ck_has_next>,</#if>
              </#list>}<#if colorItem_has_next>,</#if></#list>
            ]<#if key_has_next>,</#if>
            </#if>
          </#list>
          },
        </#if></#list>],
        title: {
          show: true,
          text: "${propsJson.titleText!''}",
          left: "2%",
          top: "5%",
          textStyle: {
            color: "${propsJson.titleColor!'rgba(255,255,255,.8)'}",
            fontSize: ${propsJson.titleSize!'18'},
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          icon:'rect',
          itemWidth:10,
          itemHeight:10,
          itemGap: ${propsJson.legendGap!'10'},
          <#if propsJson.legendshow??>
            show: ${propsJson.legendshow?string('true','false')},
          <#else> 
            show: ${propsJson.legendshow!'false'},
          </#if>
          left: "${propsJson.legendOffsetLeft!'10'}%",
          top: '6%',
          orient: 'horizontal', 
          textStyle: {
            color: '${propsJson.legendcolor}'
          }
        },
        grid:{
          left:'${'${propsJson.graphicleft}%'}',
          right:'${'${propsJson.graphicright}%'}',
          top:'${'${propsJson.graphictop}%'}',
          bottom:'${'${propsJson.graphicbottom}%'}',
        },
        xAxis: {
          data: this.xdata,
          axisLine: {
            show:${propsJson.Xhave?string("true","false")},
            lineStyle: {
              color: '${propsJson.Xcolor}'
            }
          },
          axisLabel: {
            align: "center",
            margin: 10,
            width: 40,
            verticalAlign: "top",
            overflow: "break",
            rotate: -10,
          },
          axisTick: {
            show: false
          },
          splitLine:{
            show:${propsJson.XhaveLine?string("true","false")},
            lineStyle: {    
              color: '${propsJson.Xlinecolor}'
            }
          },
        },
        yAxis: {
          position: "${propsJson.YPosition!'left'}",
          axisLine: {
            show:${propsJson.Yhave?string("true","false")},
            lineStyle: {
              color: '${propsJson.Ycolor}'
            }
          },
          splitLine:{
            show:${propsJson.YhaveLine?string("true","false")},
            lineStyle: {
              color: '${propsJson.Ylinecolor}'
            }
          },
        },
        label: {
          show: ${propsJson.labelhave?string("true","false")},
          position: '${propsJson.labellayout}',
          color: '${propsJson.labelcolor}'
        },
        dataZoom: this.dataZoom,
        series: this.seriesdata
      };
      return option;
    },
    renderEcharts(){
        this.echarts = echarts.init(this.$refs.echarts)
        this.echarts.setOption(this.echartsData())
    },
  },
  mounted(){
    this.$nextTick(function(){
      this.renderEcharts()
    })
  }
};
</script>

<style>
</style>
